import React, { Component, useState } from 'react';
import { connect } from 'react-redux';
import { Button, Modal, Form, Input, Radio, Select } from 'antd';
import action from '../../../store/action';
import { UploadOutlined } from '@ant-design/icons';
import { stand } from '../../view_public/Add_public';
import Articel from '../Articel';
import E from "wangeditor";
import Upload from './Upload';


const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
    const layout = {
        wrapperCol: {
            offset: 0,
            // span: 10,
        },
    };
    const tailLayout = {
        labelCol: {
            offset: 2
        }
    }
    const [form] = Form.useForm();
   
    const { Option } = Select;
    const op_data = ['动态', '公告', '最新数据', '最新标准', '最新资源', '最新案例', '热门检索', '材料性能数据', '测试方法', '测试规范'];
    return (
        <Modal
            visible={visible}
            title="增加测试标准"
            okText="提交"
            cancelText="取消"
            onCancel={onCancel}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        form.resetFields();
                        onCreate(values);
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                {...tailLayout}
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={{
                    modifier: 'public',
                }}
            >
                <div>
                    <div className='add_dynamic'>
                        <Form.Item name="temperature" label="类型:" rules={[
                            {
                                required: true,
                                message: '内容不能为空!',
                            },
                        ]}>
                            <Select placeholder="请选择">
                                {
                                    op_data.map((item, index) => (
                                        <Option key={index + 1}>{item}</Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item name="title" label="标题:">
                            <Input type="textarea" />
                        </Form.Item>

                    </div>
                   
                     <Upload/>
               
                    <Form.Item name="wangEditor" label="内容:" style={{ zIndex: 0 }}>
                        <Articel />
                    </Form.Item>

                </div>
            </Form>
        </Modal>
    );
};

const CollectionsPage = (props) => {
    const [visible, setVisible] = useState(false);

    const onCreate = values => {
 
        setVisible(false);
        props.item(values)
    };
    return (
        <div style={{ marginBottom: 10 }}>
            <Button
                type="primary"
                onClick={() => {
                    setVisible(true);

                }}
                style={{ width: '100px' }}
            >
                添加
      </Button>
            <CollectionCreateForm
                visible={visible}
                onCreate={onCreate}

                onCancel={() => {
                    setVisible(false);
                }}
            />
        </div>
    );
};

class index extends React.Component {
    constructor() {
        super();
    }
    render() {
        return <CollectionsPage item={(val) => this.handel_add(val)} />
    }
    handel_add = (e) => {
   
        const list = {
            type: e.temperature,
            title: e.title,
            coverPicPath:e.img_url.imageUrl,
            context:this.props.wang
        }

        
        this.$axios.post('/manager/api/addDynamicAnnouncement',list).then((res) => {
            if(res.status===1){
          
                this.$axios.get('/manager/api/pageGetDynamicAnnouncement/0/9999').then((res) => {
                    if(res.status===1){
                      const {dynamic_get}=this.props;
                      let new_list = {};
                      [].push.apply(new_list, res.dynamicAnnouncementList);
                      dynamic_get(new_list)
                    }
             
                  }).catch((err) => {
                      console.log(err);
                  })
            }
          }).catch((err) => {
              console.log(err);
          })
    }
}

export default connect(state => ({ ...state.custom }), action.custom)(index);